<!-- 机票资料卡-->
<!-- 填写资料搜索航班-->
<template>
  <div id="planeBackground">
    <el-form id="planeDataCarForm">
      <div id="planeDataCarTitle">国内机票</div>
      <div id="goBackSelection">
        <el-radio-group v-model="radio" >
          <el-radio @click="planeGoTicket" label="1" size="large">单程</el-radio>
          <el-radio @click="planeBackTicket" label="2" size="large">往返</el-radio>
        </el-radio-group>
      </div>
      <div id="planeLabel">
        <label id="startLabel">出发地</label>
        <label id="arriveLabel">目的地</label>
      </div>
      <div id="planeInput">
        <el-col id="planeStartInput" :span="8">
          <el-autocomplete
              class="animate__animated animate__fadeInLeft"
              style="--animate-duration: 0.5s;"
              v-model="planeStartCity"
              :fetch-suggestions="querySearch"
              placeholder="城市名"
              @select="handleSelect"
          />
        </el-col>

        <el-button
            class="animate__animated animate__fadeIn"
            id="planeSwitchButton"
            circle
            :icon="Switch"
            @click="planeDataCarSwitch"
            >
        </el-button>
        <el-col id="planeArriveInput" :span="8">
          <el-autocomplete
              class="animate__animated animate__fadeInRight"
              style="--animate-duration: 0.5s;"
              v-model="planeArriveCity"
              :fetch-suggestions="querySearch"
              placeholder="城市名"
              @select="handleSelect"
          />
        </el-col>
      </div>
      <div id="planeDataLabel">
        <label id="startDataLabel">出发日期</label>
        <label id="endDataLabel">返回日期</label>
      </div>
      <div id="planeData">
        <el-col id="planeGoDate" :span="8">
          <el-date-picker
              class="animate__animated animate__fadeInLeft"
              type="date"
              placeholder="出发日期"
              v-model="planeGoDate"
              style="width: 100%;--animate-duration: 1s;"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
          ></el-date-picker>
        </el-col>
          <el-col id="planeBackDate" :span="8">
          <el-date-picker
              type="date"
              class="animate__animated animate__fadeInRight"
              placeholder="返回日期"
              v-model="planeBackDate"
              style="width: 100%;--animate-duration: 1s;"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
          ></el-date-picker>
        </el-col>
      </div>
      <div id="planeChildSelection">
        <el-checkbox v-model="checkedChild" label="带儿童2-12岁" size="large" />
        <el-checkbox v-model="checkedBaby" label="带婴儿14天-2岁" size="large" />
      </div>
      <el-button @click="toPlaneResult" id="planeSearchTicket"><img src="../../assets/images-plane/planeSearchLogo.png"/>&nbsp;搜索</el-button>
    </el-form>
  </div>
  <div id="planeCenter">
<!--   机票服务   -->
    <div id="planeServe">
      <div id="planeServerTitle">机票服务</div>
      <div class="planeServerButton">
        <el-button class="planeServeButton"><img src="../../assets/images-plane/planeMyTicket.png" alt="">我的机票</el-button>
        <el-button class="planeServeButton"><img src="../../assets/images-plane/planeFlightDynamic.png" alt="">航班动态</el-button>
      </div>
      <div class="planeServerButton">
        <el-button class="planeServeButton"><img src="../../assets/images-plane/planeLineCheck.png">我的机票</el-button>
        <el-button class="planeServeButton"><img src="../../assets/images-plane/planeFlightGuide.png">我的机票</el-button>
      </div>
    </div>
<!--  图片  -->
    <div class="planeCenterImage" :class="{'planeCenterImage2' :planeCenterSwitch==false}">
      <button @click="CenterSwitch" class="planeSwitchBackground" :class="{'planeSwitchBackground2' :planeCenterSwitch==false}"></button>
    </div>
  </div>
</template>

<script>
import {Switch} from "@element-plus/icons-vue";
import route from "../../router";
import store from "../../store";
export default {
  name: "PlaneDataCard",
  data(){
    return{
      Switch,
      radio:"1",
      planeGoDate:'',
      planeBackDate:'',
      checkedChild:false,
      checkedBaby:false,
      planeStartCity:'',
      planeArriveCity:'',
      planeCenterSwitch:false,
      planeInfo:[],
    }
  },
  methods:{
    planeDataCarSwitch(){
      let temp = this.planeStartCity;
      this.planeStartCity = this.planeArriveCity;
      this.planeArriveCity = temp;
    },
    planeGoTicket(){
      this.planeBackDate = '';
    },
    planeBackTicket(){
      this.planeBackDate = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+'0'+(new Date().getDate()+1);
    },
    CenterSwitch(){
      this.planeCenterSwitch = !this.planeCenterSwitch;
    },
    querySearch(queryString, cb) {
      let planeInfo = this.planeInfo;
      let results = queryString ? planeInfo.filter(this.createFilter(queryString)) : planeInfo;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "北京" },
        { "value": "上海" },
        { "value": "广州" },
        { "value": "深圳" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    toPlaneResult(){
      if(this.planeStartCity!==""&&this.planeStartCity!==""&&this.planeGoDate!==""){
        route.push(`flightSearchResult`);
        store.state.flightSearchInfo.leaveCity = this.planeStartCity;
        store.state.flightSearchInfo.arriveCity = this.planeArriveCity;
        store.state.flightSearchInfo.leaveTime = this.planeGoDate ;
      }else {
        alert("请填写");
      }

    },
  },
  mounted() {
    this.planeStartCity = "上海";
    this.planeArriveCity = "北京";
    if(new Date().getDate()<10){
      this.planeGoDate = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+'0'+new Date().getDate();
    }else{
      this.planeGoDate = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate();
    }
    console.log(this.planeGoDate);
    this.planeInfo = this.loadAll()
  },
}
</script>

<style scoped>
#planeBackground{
  margin-top: 20px;
  height: 300px;
  width: 1470px;
  background: url("../../assets/images-plane/planeDataCarBackground.png");
}
#planeDataCarForm{
  margin-left: 150px;
  background: #FFFFFF;
  width: 400px;
  height: 300px;
  border-bottom: 1px solid red;
}
#planeDataCarTitle{
  background: #efeff4;
  line-height: 40px;
  padding-left: 10px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  height: 40px;
  color: #333333;
}
#goBackSelection{
  height: 35px;
  padding-left: 15px;
  text-align: left;
}
#planeLabel{
  width: 400px;
  height: 30px;
  line-height: 40px;
}
#startLabel{
  float: left;
  margin-left: 10px;
  height: 30px;
  width: 50px;
  color: #b2b2b2;
}
#arriveLabel{
  margin-left: 5px;
  height: 30px;
  width: 50px;
  color: #b2b2b2 ;
}
#planeInput{
  float: left;
  text-align: left;
  padding-left: 10px;
  width: 400px;
  height: 40px;
}
#planeSwitchButton{
  float: left;
  font-size: 20px;
  color: #67C23A;
  margin-left: 20px;
  height: 30px;
  width: 30px;
  border: 1px solid #67C23A;
}
#planeDataLabel{
  float: left;
  width: 400px;
  height: 30px;
}
#startDataLabel{
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  height: 30px;
  width: 60px;
  color: #b2b2b2;
}
#endDataLabel{
  margin-left: 5px;
  margin-top: 5px;
  height: 30px;
  width: 60px;
  color: #b2b2b2 ;
}
#planeData{
  padding-left: 10px;
  float: left;
  width: 400px;
  height: 40px;
}
#planeGoDate{
  float: left;
}
#planeBackDate{
  margin-left: 70px;
  float: left;
}
#planeChildSelection{
  margin-left: 10px;
  text-align: left;
}
#planeSearchTicket{
  font-size: 17px;
  color: #FFFFFF;
  background: #ff6815;
  width: 300px;
}
#planeCenter{
  margin-left: 150px;
  margin-top: 50px;
  height: 300px;
  width: 1250px;
}
#planeServe{
  width: 350px;
  height: 300px;
}
#planeServerTitle{
  font-family: "仓耳渔阳体 W04", serif;
  margin-top: 10px;
  text-align: left;
  font-size: 40px;
  width: 350px;
  height: 100px;
}
.planeServerButton{
  width: 350px;
  height: 95px;
}
.planeServeButton{
  margin-right: 15px;
  font-size: 20px;
  float: left;
  width: 150px;
  height: 75px;
  background: #fff;
}
.planeCenterImage{
  position: absolute;
  top: 570px;
  left: 500px;
  height: 250px;
  width: 900px;
  background-image: url("../../assets/images-plane/planeCenterBackground.png");
}
.planeCenterImage2{
  position: absolute;
  top: 570px;
  left: 500px;
  height: 250px;
  width: 900px;
  /*border: 1px solid hotpink;*/
  background-image: url("../../assets/images-plane/planeCenterBackground2.png");
}
.planeSwitchBackground{
  border-style: none;
  height: 99px;
  width: 100px;
  float: right;
  background-image: url("../../assets/images-plane/planeSwitchBackground.png");
}
.planeSwitchBackground2{
  border-style: none;
  height: 100px;
  width: 100px;
  float: right;
  background-image: url("../../assets/images-plane/planeSwitchBackground2.png");
}
#planeStartInput{
  float: left;
}
#planeArriveInput{
  float: left;
  margin-left: 20px;
}
</style>